<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/back/css/datedropper.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/back/css/timedropper.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/back/css/hzw-city-picker.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/back/css/button.css">
<style type="text/css">
table {
	border-collapse: collapse;
	text-align: center;
	margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
th{
width: 180px;
}
tr{
height:35px;
}
a{
text-decoration: none;

}
body{
font-family: "幼圆";}
input{
height: 30px;
margin: -5px 0px 0px -1px;
font-size: 18px;
padding-left: 7px;
}



th, td {
  padding:6px 0;
  text-align:center;
 }
 th {
  background-color:#007D28;
  color:#ffffff;
 }
 
 tr {
  background-color:#E8FFE8;
 }
 
 .odd {
  background-color:#FFF3EE;
 }
 
 .highlight {
  background-color:#E0E0E0;
}
</style>
</head>
<script src="${pageContext.request.contextPath}/back/jquery/jquery-1.8.3.js"
	type="text/javascript"></script>
<script>

$(function(){
	$("tr:even").css("background-Color", "lightblue");
	$("#qidian").blur(function(){
		$.post("QueryTrainServlet",{
			keyword:$("#qidian").val(),
			},callback);
	});

})

function yanzheng(){
	
	if($("#cityChoice").val()==""&&$("#pickdate").val()==""){		
		location.href='QueryTrainServlet';
		return false;
	}
	
	if($("#cityChoice").val()!=""&&$("#pickdate").val()==""){
		alert("请填写您所要查的时间！")
		return false;
	}
	if($("#cityChoice").val()==""&&$("#pickdate").val()!=""){
		alert("请填写您所要查的城市！")
		return false;
	}
	
}
//动态给js添加class属性
function addClass(element, value) {
 if(!element.className) {
  element.className = value; //如果element本身不存在class,则直接添加class为value的值
 } else {
  element.className += " "+value; //如果element之前有一个class值，注意中间要多一个空格,然后再加上value的值
 }
}

//隔行换色
function stripeTable() {
 var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
 for(var i=0; i<tables.length; i++) {
  var rows = document.getElementsByTagName("tr");
  for(var j=0; j<rows.length; j++) {
   if(j%2 == 0) {
    addClass(rows[j], "odd"); //如是偶数行，则添加class为odd的属性
    //rows[j].setAttribute("class", "odd");
   }
  }
 }
}

//鼠标经过时高亮显示
function highlightRows() {
 var rows = document.getElementsByTagName("tr");
 for(var i=0; i<rows.length; i++) {
  rows[i].oldClassName = rows[i].className; //首先保存之前的class值
  rows[i].onmouseover = function() {
   addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
  }
  rows[i].onmouseout = function() {
   this.className = this.oldClassName; //鼠标离开时还原之前的class值
  }
 }
}

window.onload = function() {
 stripeTable();
 highlightRows();
}

</script>
<body>

<h2 style="margin-left: 570px;">欢迎查看列车信息</h2>
<form action="QueryBykeywordServlet?flag=1" method="post" onsubmit="return yanzheng()" style="padding-top: 5px; margin-left: -78px; font-size: 21px;">
<span style="margin-left: 526px;"><b>起点：</b></span><input type="text"  readonly="readonly" id="cityChoice" style=" height: 26px; margin: -5px 0 0 -1px;"  name="goname" style="height: 26px;">
<span><b>时间：</b></span><input type="text" id="pickdate" name="shijian" style=" height: 26px;" readonly="readonly">
<input type="submit" value="查询" class="button blue" style="width: 94px; height: 39px;">
</form>
<div class="content">
 <div id="man" style="margin-top: 20px;">
<c:if test="${not empty list }">
 <table border="1px" summary="user infomation table">
 <tr>
 <th>班次编号</th>
 <th>列车昵称</th>
 <th>列车类型</th>
 <th>起点站</th>
 <th>起点时间</th>
 <th>终点站</th>
 <th>到达时间</th>
 <th>可乘坐总人数</th>
 </tr>
<c:forEach items="${list }" var="l">
  <tr>
 <td>${l.cartable.carid }</td>
 <td>${l.cartable.crname }</td>
 <td>${l.cartable.ctype }</td>
 <td>${l.goname }</td>
 <td>${l.gotime}</td>
 <td>${l.overname}</td>
 <td>${l.overtime }</td>
 <td>${l.pnum }</td>

 </tr>
  </c:forEach>
  <tr>
  		<td colspan="13" style="text-align: center;">
  			<span>第${requestScope.pageIndex }页--共${requestScope.totalPage }页</span>
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=1">首页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=${pageIndex-1}">上一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=${pageIndex+1}">下一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=${totalPage }">尾页</a>
  		</td>
  </tr>
 </table>

 <p style="margin-left: 1207px;">
 <%-- <span>第${requestScope.pageIndex }页--共${requestScope.totalPage }页</span>
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=1">首页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=${pageIndex-1}">上一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=${pageIndex+1}">下一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryTrainServlet?pageIndex=${totalPage }">尾页</a> --%>
			</p>
			 </c:if>
<c:if test="${not empty list2 }">
 <table border="1px">
 <tr>
 <th>班次编号</th>
 <th>列车昵称</th>
 <th>起点站</th>
 <th>起点时间</th>
 <th>终点站</th>
 <th>到达时间</th>
 <th>总时间</th>
 <th>高铁票剩余</th>
 <th>普通票剩余</th>
 <th>站票剩余</th>
 <th>基本票价</th>
 <th>日期</th>
 </tr>
<c:forEach items="${list2 }" var="l2">
  <tr>
 <td>${l2.carid }</td>
 <td>${l2.crname }</td>
 <td>${l2.goname }</td>
 <td>${l2.gotime}</td>
 <td>${l2.overname}</td>
 <td>${l2.overtime}</td>
 <td>${l2.zongtime}</td>
 <td>${l2.coce-l2.cocenum}</td>
 <td>${l2.coon-l2.coonnum}</td>
 <td>${l2.stand-l2.standnum}</td>
 <td>${l2.jibenjia}</td>
 <td><fmt:formatDate value="${l2.gettime}" pattern="yyyy年MM月dd日" /></td>

  
 </tr>
  </c:forEach>
  <tr>
  		<td colspan="13" style="text-align: center;">
  			<span>第${requestScope.pageIndex }页--共${requestScope.totalPage }页</span>
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=1">首页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=${pageIndex-1}">上一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=${pageIndex+1}">下一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=${totalPage }">尾页</a>
  		</td>
  </tr>
 </table>
 <p style="margin-left: 1207px;">
<%--  <span>第${requestScope.pageIndex }页--共${requestScope.totalPage }页</span>
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=1">首页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=${pageIndex-1}">上一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=${pageIndex+1}">下一页</a> &nbsp;|
				<a href="${pageContext.request.contextPath}/QueryBykeywordServlet?pageIndex=${totalPage }">尾页</a> --%>
			</p>
			
			
	</c:if>	
			</div>
			</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/city-data.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/hzw-city-picker.min.js"></script>
<script>
    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice',
        valType: 'k-v',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'province',
            id: 'province'
        }
    });

    cityPicker.init();
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery-1.12.3.min.js"></script>
<script src="${pageContext.request.contextPath}/back/js/datedropper.min.js"></script>
<script src="${pageContext.request.contextPath}/back/js/timedropper.min.js"></script>
<script>
$("#pickdate").dateDropper({
	animate: false,
	format: 'Y-m-d',
	maxYear: '2020'
});
$("#picktime").timeDropper({
	meridians: false,
	format: 'HH:mm',
});
</script>
			
</body>
</html>